{% extends 'base.html' %}

{% block title %}{{ campus.name }} - 校区详情 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}校区详情{% endblock %}

{% block extra_css %}
<style>
    .detail-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .campus-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid #f8f9fa;
    }

    .campus-title {
        font-size: 2rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .campus-status {
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .status-active {
        background: #d4edda;
        color: #155724;
    }

    .status-inactive {
        background: #f8d7da;
        color: #721c24;
    }

    .campus-photo {
        width: 100%;
        max-width: 400px;
        height: 250px;
        object-fit: cover;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .no-photo {
        width: 100%;
        max-width: 400px;
        height: 250px;
        background: #f8f9fa;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        font-size: 3rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }

    .info-section {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #007bff;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .info-item:last-child {
        margin-bottom: 0;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        min-width: 80px;
        margin-right: 1rem;
    }

    .info-value {
        color: #6c757d;
        flex: 1;
    }

    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-left: 4px solid;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .stat-card.primary { border-left-color: #007bff; }
    .stat-card.success { border-left-color: #28a745; }
    .stat-card.info { border-left-color: #17a2b8; }
    .stat-card.warning { border-left-color: #ffc107; }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .stat-icon.primary { color: #007bff; }
    .stat-icon.success { color: #28a745; }
    .stat-icon.info { color: #17a2b8; }
    .stat-icon.warning { color: #ffc107; }

    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
        line-height: 1;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 2rem;
    }

    .btn-action {
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .alert-info {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        color: #0c5460;
        border-radius: 10px;
        padding: 1rem;
    }

    .associations-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .associations-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .associations-list li:last-child {
        border-bottom: none;
    }

    @media (max-width: 768px) {
        .campus-header {
            flex-direction: column;
            gap: 1rem;
        }

        .action-buttons {
            flex-direction: column;
        }

        .btn-action {
            width: 100%;
            text-align: center;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .stat-cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 校区基本信息 -->
    <div class="detail-card">
        <div class="campus-header">
            <div>
                <h1 class="campus-title">{{ campus.name }}</h1>
                <p class="text-muted mb-0">
                    创建时间：{{ campus.created_at.strftime('%Y年%m月%d日') if campus.created_at else '未知' }}
                    {% if campus.updated_at and campus.updated_at != campus.created_at %}
                    | 最后更新：{{ campus.updated_at.strftime('%Y年%m月%d日') }}
                    {% endif %}
                </p>
            </div>
            <span class="campus-status status-{{ campus.status }}">
                {% if campus.status == 'active' %}正常运营
                {% elif campus.status == 'inactive' %}暂停运营
                {% else %}{{ campus.status }}
                {% endif %}
            </span>
        </div>

        <div class="row">
            <div class="col-lg-4 mb-4">
                {% if campus.photo_url %}
                    <img src="{{ campus.photo_url }}" alt="{{ campus.name }}" class="campus-photo">
                {% else %}
                    <div class="no-photo">
                        <i class="bi bi-building"></i>
                    </div>
                {% endif %}
            </div>
            <div class="col-lg-8">
                <div class="info-grid">
                    <!-- 基本信息 -->
                    <div class="info-section">
                        <h5 class="section-title">
                            <i class="bi bi-info-circle"></i>基本信息
                        </h5>
                        <div class="info-item">
                            <span class="info-label">地址：</span>
                            <span class="info-value">{{ campus.address }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">电话：</span>
                            <span class="info-value">{{ campus.phone }}</span>
                        </div>
                        {% if campus.email %}
                        <div class="info-item">
                            <span class="info-label">邮箱：</span>
                            <span class="info-value">{{ campus.email }}</span>
                        </div>
                        {% endif %}
                        <div class="info-item">
                            <span class="info-label">容量：</span>
                            <span class="info-value">{{ campus.capacity }}人</span>
                        </div>
                        {% if campus.area %}
                        <div class="info-item">
                            <span class="info-label">面积：</span>
                            <span class="info-value">{{ campus.area }}平方米</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- 管理信息 -->
                    <div class="info-section">
                        <h5 class="section-title">
                            <i class="bi bi-person-gear"></i>管理信息
                        </h5>
                        <div class="info-item">
                            <span class="info-label">管理员：</span>
                            <span class="info-value">
                                {% if campus.admin %}
                                    {{ campus.admin.real_name }}
                                    <small class="text-muted d-block">{{ campus.admin.username }}</small>
                                    <small class="text-muted d-block">{{ campus.admin.phone }}</small>
                                {% else %}
                                    <span class="text-warning">未分配管理员</span>
                                {% endif %}
                            </span>
                        </div>
                        {% if campus.operating_hours %}
                        <div class="info-item">
                            <span class="info-label">营业时间：</span>
                            <span class="info-value">{{ campus.operating_hours }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>

                {% if campus.description or campus.facilities %}
                <div class="mt-4">
                    {% if campus.description %}
                    <div class="info-section mb-3">
                        <h5 class="section-title">
                            <i class="bi bi-card-text"></i>校区描述
                        </h5>
                        <p class="info-value mb-0">{{ campus.description }}</p>
                    </div>
                    {% endif %}

                    {% if campus.facilities %}
                    <div class="info-section">
                        <h5 class="section-title">
                            <i class="bi bi-tools"></i>设施设备
                        </h5>
                        <p class="info-value mb-0">{{ campus.facilities }}</p>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 统计数据 -->
    <div class="stat-cards">
        <div class="stat-card primary">
            <div class="stat-icon primary">
                <i class="bi bi-people"></i>
            </div>
            <h3 class="stat-number">{{ statistics.total_users }}</h3>
            <div class="stat-label">总用户数</div>
        </div>

        <div class="stat-card success">
            <div class="stat-icon success">
                <i class="bi bi-mortarboard"></i>
            </div>
            <h3 class="stat-number">{{ statistics.active_students }}</h3>
            <div class="stat-label">活跃学员</div>
        </div>

        <div class="stat-card info">
            <div class="stat-icon info">
                <i class="bi bi-person-check"></i>
            </div>
            <h3 class="stat-number">{{ statistics.active_coaches }}</h3>
            <div class="stat-label">认证教练</div>
        </div>

        <div class="stat-card warning">
            <div class="stat-icon warning">
                <i class="bi bi-table"></i>
            </div>
            <h3 class="stat-number">{{ statistics.available_tables }}</h3>
            <div class="stat-label">可用球台</div>
        </div>

        <div class="stat-card primary">
            <div class="stat-icon primary">
                <i class="bi bi-calendar-check"></i>
            </div>
            <h3 class="stat-number">{{ statistics.month_reservations }}</h3>
            <div class="stat-label">本月预约</div>
        </div>

        <div class="stat-card info">
            <div class="stat-icon info">
                <i class="bi bi-grid-3x3"></i>
            </div>
            <h3 class="stat-number">{{ statistics.total_tables }}</h3>
            <div class="stat-label">总球台数</div>
        </div>
    </div>

    <!-- 关联数据检查 -->
    {% if associations.user_count > 0 or associations.table_count > 0 or associations.active_reservation_count > 0 %}
    <div class="detail-card">
        <h5 class="section-title">
            <i class="bi bi-link-45deg"></i>关联数据
        </h5>
        <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            此校区包含以下关联数据，删除前需要先处理这些数据：
        </div>
        <ul class="associations-list">
            {% if associations.user_count > 0 %}
            <li>
                <span><i class="bi bi-people me-2"></i>用户数据</span>
                <span class="badge bg-primary">{{ associations.user_count }} 个用户</span>
            </li>
            {% endif %}
            {% if associations.table_count > 0 %}
            <li>
                <span><i class="bi bi-table me-2"></i>球台数据</span>
                <span class="badge bg-info">{{ associations.table_count }} 个球台</span>
            </li>
            {% endif %}
            {% if associations.active_reservation_count > 0 %}
            <li>
                <span><i class="bi bi-calendar-check me-2"></i>活跃预约</span>
                <span class="badge bg-warning">{{ associations.active_reservation_count }} 个预约</span>
            </li>
            {% endif %}
        </ul>
    </div>
    {% endif %}

    <!-- 操作按钮 -->
    <div class="action-buttons">
        <a href="{{ url_for('campus.list') }}" class="btn btn-secondary btn-action">
            <i class="bi bi-arrow-left me-2"></i>返回列表
        </a>

        {% if current_user.is_super_admin() %}
        <a href="{{ url_for('campus.edit', id=campus.id) }}" class="btn btn-warning btn-action">
            <i class="bi bi-pencil me-2"></i>编辑校区
        </a>

        {% if associations.can_delete %}
        <a href="{{ url_for('campus.delete', id=campus.id) }}"
           class="btn btn-danger btn-action"
           onclick="return confirm('确定要删除此校区吗？此操作不可撤销！')">
            <i class="bi bi-trash me-2"></i>删除校区
        </a>
        {% else %}
        <button class="btn btn-outline-danger btn-action" disabled
                title="存在关联数据，无法删除">
            <i class="bi bi-trash me-2"></i>无法删除
        </button>
        {% endif %}
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 可以添加实时数据刷新功能
    const refreshStats = function() {
        fetch(`/campus/api/{{ campus.id }}/statistics`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新统计数据（可选实现）
                    console.log('Stats updated:', data.data);
                }
            })
            .catch(error => console.error('Error fetching stats:', error));
    };

    // 每30秒刷新一次统计数据（可选）
    // setInterval(refreshStats, 30000);
});
</script>
{% endblock %}